<template>
  <div class="bg-gray">
    <Header @search="handleSearch" />
    <div class="hidden md:block pc-wrap">
      <div class="banner mt-16 md:mt-0 relative">
        <div class="main">
          <p class="wow animate__animated animate__fadeInLeft">
            <img src="../../../assets/images/banner/title_pc.png" />
          </p>
          <p class="wow animate__animated animate__fadeInLeft" data-wow-delay="0.2s">
            <img src="../../../assets/images/banner/title_pc_1.png" />
          </p>
          <p class="wow animate__animated animate__fadeInLeft" data-wow-delay="0.4s">
            <img src="../../../assets/images/banner/btn_pc.png" class="sy" @click="apply" />
          </p>
        </div>

        <div class="flex items-center max-w-[1200px] pos-wrap">
          <div class="flex flex-col static">
            <img class="icon" src="https://static.huicanzhan.cn/home/signin/icon1.png" alt="" />
            <div>
              <div>个性化报名表单配置</div>
            </div>
          </div>
          <div class="flex flex-col static">
            <img class="icon" src="https://static.huicanzhan.cn/home/signin/icon2.png" alt="" />
            <div>
              <div>自定义渠道设置</div>
            </div>
          </div>
          <div class="flex flex-col static">
            <img class="icon" src="https://static.huicanzhan.cn/home/signin/icon3.png" alt="" />
            <div>
              <div>报名信息一键审核</div>
            </div>
          </div>
          <div class="flex flex-col static">
            <img class="icon" src="https://static.huicanzhan.cn/home/signin/icon4.png" alt="" />
            <div>
              <div>自动化回执邮件或短信</div>
            </div>
          </div>
        </div>
      </div>
      <div class="page1 clear-both">
        <div class="top wow animate__animated animate__fadeInDown">
          <h3>门票管理</h3>
          <p>TICKET MANAGEMENT</p>
        </div>
        <div class="bg-white">
          <ul class="main">
            <li class="wow animate__animated animate__fadeInDown" data-wow-delay="0.2s">
              <p class="pimg pimg1"
                ><img src="https://static.huicanzhan.cn/home/signin/icon6.png"
              /></p>
              <p>电子门票管理</p>
            </li>
            <li class="wow animate__animated animate__fadeInUp" data-wow-delay="0.6s">
              <p class="pimg"><img src="https://static.huicanzhan.cn/home/signin/icon5.png" /></p>
              <p>个性化门票设置</p>
              <div class="flex">
                <span class="flex-item">门票样式</span>
                <span class="flex-item flex-item1">票价设置</span>
                <span class="flex-item flex-item2">限制数量</span>
              </div>
            </li>
            <li class="wow animate__animated animate__fadeInDown" data-wow-delay="1s">
              <p class="pimg"><img src="https://static.huicanzhan.cn/home/signin/icon7.png" /></p>
              <p>实时数据统计</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="page2">
        <div class="main">
          <div class="top wow animate__animated animate__fadeInDown">
            <h3>签到管理</h3>
            <p>SIGN IN MANAGEMENT</p>
          </div>
        </div>
        <div class="type wow animate__animated animate__fadeInDown" data-wow-delay="0.3s">
          <img
            src="https://static.huicanzhan.cn/home/signin/pc_bg_1.png"
            class="img1 wow animate__animated animate__fadeInLeft"
          />
        </div>
      </div>
      <div class="page3">
        <div class="main">
          <div class="title-top wow animate__animated animate__fadeInDown">
            <h3>数据报表</h3>
            <p>DATA REPORT</p>
          </div>
        </div>
        <div class="type wow animate__animated animate__fadeInDown" data-wow-delay="0.3s">
          <img
            src="https://static.huicanzhan.cn/home/signin/pc_bg_2.jpg"
            class="img1 wow animate__animated animate__fadeInLeft"
          />
        </div>
      </div>
      <div class="page4">
        <div class="main">
          <div class="title-top wow animate__animated animate__fadeInDown">
            <h3>营销助力</h3>
            <p>MARKETING ASSISTANCE</p>
          </div>
          <div class="type wow animate__animated animate__fadeInDown" data-wow-delay="0.3s">
            <img
              src="../../../assets/images/banner/pc_bg_3.png"
              class="img1 wow animate__animated animate__fadeInLeft"
            />
          </div>
        </div>
      </div>
      <div class="page5">
        <div class="main">
          <div
            class="top wow animate__animated animate__zoomIn"
            data-wow-delay="0.5s"
            data-wow-duration="1.5s"
          >
            <img src="https://static.huicanzhan.cn/home/signin/img_pc.png" />
          </div>
        </div>
      </div>

      <div class="top wow animate__animated animate__fadeInDown">
        <h3>活动报名案例分享</h3>
        <p>EVENT REGISTRATION CASE SHARING</p>
      </div>

      <div class="main md:flex">
        <div
          v-if="list.length"
          class="box-border flex flex-wrap px-0 md:py-[20px] justify-center md:justify-start"
        >
          <div
            class="recommend-item pb-0"
            v-for="(item, index) in list"
            :key="index"
            @click="toDetail(item)"
          >
            <img
              class="recommend-img"
              :src="
                item.cover
                  ? item.cover
                  : defaultCover + '?x-oss-process=image/resize,w_270,h_180,m_lfit'
              "
            />
            <div class="recommend-bottom pb-0">
              <div class="title hideText2 text-[16px]">{{ item.title }}</div>
              <div class="tag_style hideText1">{{ item.tags }}</div>
              <div class="hideText3 hideText tag_style1">{{ item.desc }}</div>
              <div class="text-center text-blue-700 border-t py-4 mt-4">了解更多>></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="md:hidden mx-auto">
      <div class="relative mt-16 banner-img">
        <img src="https://static.huicanzhan.cn/home/signin/h5_bg.jpg" />
        <div class="absolute top-0 left-0 w-full h-full p-4 flex flex-col gap-y-2 py-5">
          <p class="wow animate__animated animate__fadeInLeft w-36">
            <img src="../../../assets/images/banner/title_h5.png" />
          </p>
          <p class="wow animate__animated animate__fadeInLeft w-36" data-wow-delay="0.2s">
            <img src="../../../assets/images/banner/title_h5_1.png" />
          </p>
          <p class="wow animate__animated animate__fadeInLeft w-20" data-wow-delay="0.6s">
            <img
              src="../../../assets/images/banner/btn_h5.png"
              class="sy"
              style="cursor: pointer"
              @click="apply"
            />
          </p>
        </div>
        <img src="../../../assets/images/banner/sign_img.jpg" class="pos_img" />
      </div>
      <div class="page1">
        <div class="type wow animate__animated animate__fadeInDown" data-wow-delay="0.3s">
          <img
            src="../../../assets/images/banner/sign_img1.png"
            class="img1 wow animate__animated animate__fadeInLeft"
          />
        </div>
      </div>
      <div class="page2">
        <div class="type wow animate__animated animate__fadeInDown" data-wow-delay="0.4s">
          <img
            src="https://static.huicanzhan.cn/home/signin/h5_bg_1.png"
            class="img1 wow animate__animated animate__fadeInLeft"
          />
        </div>
      </div>
      <div class="page3">
        <div class="type wow animate__animated animate__fadeInDown" data-wow-delay="0.5s">
          <img
            src="https://static.huicanzhan.cn/home/signin/h5_bg_2.png"
            class="img1 wow animate__animated animate__fadeInLeft"
          />
        </div>
      </div>
      <div class="page4">
        <div class="type wow animate__animated animate__fadeInDown" data-wow-delay="0.6s">
          <img
            src="https://static.huicanzhan.cn/home/signin/h5_bg_3.png"
            class="img1 wow animate__animated animate__fadeInLeft"
          />
        </div>
      </div>
      <div class="page6">
        <div
          class="top wow animate__animated animate__zoomIn"
          data-wow-delay="0.5s"
          data-wow-duration="1.5s"
        >
          <img src="https://static.huicanzhan.cn/home/signin/h5_bg_4.png" />
        </div>
      </div>

      <div class="top wow animate__animated animate__fadeInDown">
        <h3>活动报名案例分享</h3>
        <p>EVENT REGISTRATION CASE SHARING</p>
        <div class="">
          <div class="box-border flex flex-wrap content-box" v-if="list.length">
            <swiper
              direction="horizontal"
              :loop="true"
              :autoplay="{ disableOnIntercation: false, autoplay: false, delay: 2400 }"
              slidesPerView="auto"
              :spaceBetween="0"
              :centeredSlides="true"
              :modules="modules"
              :observer="true"
              :observeParents="true"
              :initialSlide="1"
              @transitionEnd="onSlideChange"
              ref="mySwiper"
              @swiper="onSwiper"
            >
              <swiper-slide v-for="(temp, index) in list" :key="index" @click="toDetail(temp)">
                <div class="bshadow p-2.5 pb-0 bg-white rounded-md overflow-hidden flex flex-col">
                  <img class="w-52 h-35" :src="temp.cover" />
                  <div class="mt-4 font-bold hideText2 text-[14px]">{{ temp.title }}</div>
                  <div class="tag_style line-clamp-1">{{ temp.tags }}</div>
                  <div class="line-clamp-3 hideText tag_style1">{{ temp.desc }}</div>
                  <div class="text-center text-blue-700 border-t py-4 mt-4">了解更多>></div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>
    </div>

    <Footer class="footer clear-both" />
    <apply-form ref="applyRef" />
  </div>
</template>
<script lang="ts" setup>
  import { getCaseList } from '@/api/case';
  import '@/assets/wow.js';
  import { ref, onMounted } from 'vue';

  // import { useRoute, useRouter } from 'vue-router';
  import Header from '@/components/HeaderTop/index.vue';
  import Footer from '@/components/Footer/index.vue';
  import applyForm from './components/applyForm.vue';
  import 'swiper/css';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { Autoplay, Controller } from 'swiper/modules';
  const modules = [Autoplay, Controller];

  // const router = useRouter();
  // const route = useRoute();
  const list = ref([]);
  const applyRef = ref();
  const swiperActiveIndex = ref<number>(0);
  const onSlideChange = (e) => {
    swiperActiveIndex.value = e.realIndex;
  };
  const onSwiper = () => {};
  function apply() {
    // applyRef.value.visible = true;
    window.open(import.meta.env.VITE_GLOB_SPONSOR_URL + '/cdmp/', 'sponsor_register');
  }

  function handleSearch() {}
  onMounted(async () => {
    new WOW({ live: false }).init();
    const caseData = await getCaseList();
    const caseDataItem = caseData.items.filter((item) => item.regPage === true);
    list.value = caseData.items ? caseDataItem : [];
  });
  function toDetail(item) {
    window.open(item.url);
  }
</script>
<style>
  .swiper-slide {
    width: 50% !important;
    transition: all 0.3s ease-in-out;
  }
  .swiper-slide-active .bshadow {
    @apply shadow-lg;
  }
  .swiper-slide-prev,
  .swiper-slide-next {
    transform: scale(0.9) !important;
  }
</style>
<style lang="less" scoped>
  @import '../../../styles/index.css';
  .logo {
    cursor: pointer;
  }

  .banner {
    // margin-top: 70px;
  }
  .pos-wrap {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    .static {
      margin: 0 20px 0 0;
      width: calc((100% - 20px) / 4);
      min-width: calc((100% - 20px) / 4);
      max-width: calc((100% - 20px) / 4);
      background: #fff;
      border-radius: 8px;
      height: 120px;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      font-size: 20px;
      .icon {
        height: 60px;
        margin-bottom: 10px;
        object-fit: cover;
      }
    }
  }

  .hideText1 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 限制在1行 */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hideText {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 限制在3行 */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hideText2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 限制在2行 */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .recommend-item {
    margin: 0 40px 40px 0;
    box-sizing: border-box;
    width: calc((100% - 80px) / 3);
    min-width: calc((100% - 80px) / 3);
    max-width: calc((100% - 80px) / 3);
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    font-size: 0;
    background-color: #fff;
    padding: 16px;
    &:nth-child(3n) {
      margin-right: 0;
    }
    .recommend-bottom {
      border-top: none;
      font-size: 14px;
      padding: 15px 0;
      .recommend-btm {
        padding-top: 10px;
        border-top: 1px solid #e9e9e9;
        padding: 8px 15px 0;
        margin-top: 15px;
      }
    }
    .recommend-img {
      width: 100%;
      border-radius: 8px;
      display: block;
      max-width: 100% !important;
    }

    .title {
      margin-bottom: 5px;
      font-weight: 600;
      color: #333;
    }
    .more-btn {
      font-size: 16px;
      color: #104fd6;
      cursor: pointer;
      padding: 10px 0;
      width: 100%;
    }
  }

  .tag_style {
    color: #104fd6;
    font-size: 13px;
  }
  .tag_style1 {
    font-size: 13px;
  }
  .pos_img {
    position: absolute;
    left: 50%;
    bottom: -60%;
    transform: translateX(-50%);
    width: 90%;
  }
</style>
